<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>公主连结地下城币角色碎片兑换耗时计算</title>
  <link rel="icon" href="pcr1.png" type="image/png">
  <link rel="stylesheet/less" type="text/css" href="css/main.less"/>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.11.3/less.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.0/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
</head>
<body>
<div id="app">
  <h2 style="text-align: center">公主连结地下城币角色碎片兑换耗时计算</h2>
  <div class="content">
    <div class="character-box">
      <div class="character-all">
        <span>可兑换角色:</span>
        <ul>
          <li v-for="item in characterAll" :key="item.name">
            <img :src="`image/characters/${item.name}.png`" alt="" @click="addCharacter(item)" :title="item.nameCN">
          </li>
        </ul>
      </div>
      <div class="character-my">
        <span>我的角色:</span>
        <el-radio-group v-model="radioChecked" size="small" @change="radioGroupChange">
          <template v-for="(item, index) in characterMyGroup">
            <el-radio-button v-if="index === 0" :label="item.name" :readonly="false"
                             @dblclick.native="editRadioButtonText(item)"></el-radio-button>
            <el-radio-button v-else :label="item.name" style="margin-left: -5px;"
                             @dblclick.native="editRadioButtonText(item)"></el-radio-button>
          </template>
          <el-popover
              placement="bottom"
              width="200"
              v-model="popoverShow"
          >
            <el-input type="text" size="small" style="width: 180px;" clearable v-model="characterMyGroupCurrent.name"
                      @keydown.enter.native="popoverShow = false"></el-input>
          </el-popover>
        </el-radio-group>
        <el-button type="primary" size="small" icon="el-icon-plus" circle @click="addCharacterMyGroup"></el-button>
        <ul>
          <li v-for="(item,index) in characterMy" :key="item.name">
            <span class="glyphicon glyphicon-remove" title="删除" @click="removeSpanMouseover(item)"></span>
            <img v-if="item.isCurrent" style="opacity: 1" :src="`image/characters/${item.name}.png`" alt=""
                 @click="removeCharacter(item)" :title="item.nameCN">
            <img v-else :src="`image/characters/${item.name}.png`" alt="" @click="currentCharacter(item, $event)"
                 :title="item.nameCN">
          </li>
        </ul>
      </div>
    </div>
    <div class="form">
      <form role="form">
        <div class="form-group form-inline">
          <span class="label1">角色星级:</span>
          <el-input type="number" min="0" max="5" style="width: 120px;" clearable @keyup.enter="calculate"
                    v-model.number="character.star"></el-input>
          <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right"
                title="没有角色时就填0。注: 3星角色直接拼出来需要145个碎片，拼出来后就是3星，同样的，2星角色需要45个碎片，1星角色需要15个碎片，而1星角色升到3星分别需要30、100个碎片，再加上15，刚好和3星角色直接拼出来需要的碎片数量相同，所以当你没有角色时就填0"></span>
        </div>
        <div class="form-group form-inline">
          <span class="label1">角色碎片数:</span>
          <el-input type="number" min="0" style="width: 120px;" clearable @keyup.enter="calculate"
                    v-model.number="character.debris"></el-input>
        </div>
        <div class="form-group form-inline">
          <span class="label1">已有的地下城币数:</span>
          <el-input type="number" min="0" style="width: 120px;" clearable @keyup.enter="calculate"
                    v-model.number="coin"></el-input>
        </div>
        <div class="form-group form-inline">
          <span class="label1">每天获取的地下城币数:</span>
          <el-input type="number" min="0" style="width: 120px;" clearable @keyup.enter="calculate"
                    v-model.number="coinDailyObtain"></el-input>
          <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right"
                title="注: vh地下城每天全部通关后可获得1500地下城币，开月卡的话x2,每天可以通过消耗地下城币来手动刷新兑换列表，前4次刷新每次消耗10地下城币，第五次则涨到了50地下城币；这里只考虑每天只兑换一名角色的碎片且最多刷新4次的情况。当满级满经验时，每日任务获得的经验会以1:2的比例换成地下城币。"></span>
          <el-button size="small" @click="coinDailyObtain = 1500">1500</el-button>
          <el-button size="small" @click="coinDailyObtain = 2220">2220</el-button>
          <el-button size="small" @click="coinDailyObtain = 3000">3000</el-button>
          <el-button size="small" @click="coinDailyObtain = 3720">3720</el-button>
        </div>
      </form>
    </div>
    <el-button size="small" type="success" @click="calculate">计算</el-button>
    <el-button size="small" type="success" @click="calculateAll">计算全部</el-button>
    <div class="result">
      <div style="font-size: 18px">共需要花费{{ round }}天</div>
      <div style="margin-top: 10px;">
        <div>详情:
          <el-checkbox v-model="isSimpleMsg">简要信息</el-checkbox>
        </div>
        <div class="detail">
          <template v-if="isSimpleMsg">
            <div v-for="item in msgSimple">
              <span v-html="item"></span>
            </div>
          </template>
          <template v-else>
            <div v-for="item in msg">
              <span v-html="item"></span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  $(function () {
    $("[data-toggle='tooltip']").tooltip()
  })
  new Vue({
    el: "#app",
    data: {
      coin: 0,
      coinDailyObtain: 1500,
      characterAll: [
        {name: 'akari', nameCN: '茜里'},
        {name: 'kuuka', nameCN: '空花'},
        {name: 'maho', nameCN: '真步'},
        {name: 'kyaru', nameCN: '凯露'},
        {name: 'mitsuki', nameCN: '深月'},
        {name: 'nozomi', nameCN: '望'},
        {name: 'yukari', nameCN: '由加莉'}
      ],
      characterMyGroup: [
        {
          name: '编组1',
          characterMy: []
        },
        {
          name: '编组2',
          characterMy: []
        }
      ],
      characterMyGroupCurrent: {
        name: '',
        characterMy: []
      },
      radioChecked: '',
      characterMy: [],
      character: {
        name: '',
        star: 3,
        debris: 0
      },
      characterUpgradeDebrisCost: {
        0: 15,
        1: 30,
        2: 100,
        3: 120,
        4: 150
      },
      round: 0,
      popoverShow: false,
      isSimpleMsg: false,
      msg: [],
      msgSimple: []
    },
    watch: {
      characterMyGroup: {
        handler() {
          localStorage.setItem('characterMyGroup', JSON.stringify(this.characterMyGroup))
        },
        deep: true
      },
      characterMyGroupCurrent: {
        handler() {
          this.radioChecked = this.characterMyGroupCurrent.name
        },
        deep: true
      }
    },
    mounted() {
      if (localStorage.getItem('characterMyGroup')) {
        this.characterMyGroup = JSON.parse(localStorage.getItem('characterMyGroup'))
      }
      this.radioChecked = this.characterMyGroup[0].name
      this.characterMy = this.characterMyGroup[0].characterMy
      if (localStorage.getItem('coinDailyObtain')) {
        this.coinDailyObtain = parseInt(localStorage.getItem('coinDailyObtain'))
      }
      this.character = this.characterMy.length > 0 ? this.characterMy[0] : {
        name: this.characterAll[0].name,
        nameCN: this.characterAll[0].nameCN,
        star: 3,
        debris: 0,
        isCurrent: true
      }

    },
    methods: {
      addCharacter(item) {
        const exist = this.characterMy.filter(value => {
          return value.name === item.name
        }).length > 0
        if (!exist) {
          this.characterMy.push({
            name: item.name,
            nameCN: item.nameCN,
            star: 3,
            debris: 0,
            isCurrent: false
          })
          localStorage.setItem('characterMy', JSON.stringify(this.characterMy))
        }
      },
      addCharacterMyGroup() {
        let length = this.characterMyGroup.length
        this.characterMyGroup.push({
          name: '编组' + (length + 1),
          characterMy: []
        })
      },
      editRadioButtonText(item) {
        this.popoverShow = true
      },
      radioGroupChange(item) {
        let first = this.characterMyGroup.filter(v => v.name === item)[0]
        this.characterMyGroupCurrent = first
        this.characterMy = first.characterMy
      },
      removeCharacter(item) {
      },
      removeSpanMouseover(item) {
        this.characterMy.splice(this.characterMy.indexOf(item), 1)
        localStorage.setItem('characterMy', JSON.stringify(this.characterMy))
      },
      currentCharacter(item, e) {
        let filter = this.characterMy.filter(value => value.isCurrent)
        if (filter.length > 0) {
          filter.map(value => value.isCurrent = false)
        }
        item.isCurrent = true
        this.character = item
      },
      calculate() {
        localStorage.setItem('coinDailyObtain', this.coinDailyObtain)
        this.msg = []
        let coin = this.coin
        let character = {
          star: this.character.star,
          debris: this.character.debris
        }
        if (this.coinDailyObtain <= 0 || character.star < 0 || character.debris < 0 || character.star >= 5) {
          return
        }
        this.round = 1
        while (character.star < 5) {
          let oldStar = -1
          coin += this.coinDailyObtain
          if (coin >= 800) {
            coin -= 800
            character.debris += 5
          }
          if (character.debris >= this.characterUpgradeDebrisCost[character.star]) {
            oldStar = character.star
            character.debris = character.debris % this.characterUpgradeDebrisCost[character.star]
            character.star += 1
          }
          let refreshCount = 0
          while (coin >= 810 && refreshCount < 4 && character.star < 5) {
            coin -= 810
            refreshCount += 1
            character.debris += 5
            if (character.debris >= this.characterUpgradeDebrisCost[character.star]) {
              oldStar = character.star
              character.debris = character.debris % this.characterUpgradeDebrisCost[character.star]
              character.star += 1
            }
          }
          if (oldStar !== -1) {
            this.msg.push(`<span style="color: red">第${this.round}天, 手动刷新${refreshCount}次, 获取了${(refreshCount + 1) * 5}碎片, 角色星级:${character.star}, 已有碎片:${character.debris}, 剩余地下城币: ${coin}</span>`)
          } else {
            this.msg.push(`第${this.round}天, 手动刷新${refreshCount}次, 获取了${(refreshCount + 1) * 5}碎片, 角色星级:${character.star}, 已有碎片:${character.debris}, 剩余地下城币: ${coin}`)
          }
          if (character.star === 5) {
            break
          }
          this.round += 1
        }
      },
      calculateAll() {
        localStorage.setItem('coinDailyObtain', this.coinDailyObtain)
        this.msg = []
        this.msgSimple = []
        let coin = this.coin
        this.round = 1
        let isObtainedCoinToday = false
        for (const characterEle of this.characterMy) {
          let character = {
            name: characterEle.name,
            nameCN: characterEle.nameCN,
            star: characterEle.star,
            debris: characterEle.debris
          }
          if (this.coinDailyObtain <= 0 || character.star < 0 || character.debris < 0 || character.star >= 5) {
            continue
          }

          while (character.star < 5) {
            let oldStar = -1
            if (isObtainedCoinToday) {
              isObtainedCoinToday = !isObtainedCoinToday
            } else {
              coin += this.coinDailyObtain
            }
            if (coin >= 800) {
              coin -= 800
              character.debris += 5
            }
            if (character.debris >= this.characterUpgradeDebrisCost[character.star]) {
              oldStar = character.star
              character.debris = character.debris % this.characterUpgradeDebrisCost[character.star]
              character.star += 1
            }
            let refreshCount = 0
            while (coin >= 810 && refreshCount < 4 && character.star < 5) {
              coin -= 810
              refreshCount += 1
              character.debris += 5
              if (character.debris >= this.characterUpgradeDebrisCost[character.star]) {
                oldStar = character.star
                character.debris = character.debris % this.characterUpgradeDebrisCost[character.star]
                character.star += 1
              }
            }
            if (oldStar !== -1) {
              this.msgSimple.push(`第${this.round}天, ${character.nameCN}升至${character.star}星, 剩余地下城币: ${coin}`)
              this.msg.push(`<span style="color: red">第${this.round}天, 手动刷新${refreshCount}次, 获取了${(refreshCount + 1) * 5}碎片, ${character.nameCN}星级:${character.star}, 已有碎片:${character.debris}, 剩余地下城币: ${coin}</span>`)
            } else {
              this.msg.push(`第${this.round}天, 手动刷新${refreshCount}次, 获取了${(refreshCount + 1) * 5}碎片, ${character.nameCN}星级:${character.star}, 已有碎片:${character.debris}, 剩余地下城币: ${coin}`)
            }
            if (character.star === 5) {
              isObtainedCoinToday = true
              break
            }
            this.round += 1
          }
        }
      }
    }
  })
</script>
</html>
